<template>
  <div class="maininfochange">
    <!-- 修改展示页面 -->
    <div style="width:90%;margin: 0 auto;margin-top:10px;">
      <div v-if="mainmodify">
        <a-spin :spinning="spinning">
          <p style="color:#3a3a3a;">我们将在1个工作日内完成审核，审核通过后变更生效</p>
          <!-- <a-row>
          <a-col :xs="{ span : 24 }" :sm="{ span:7 }" class="formGroupTitle1">证件有效期更新</a-col>
          </a-row>-->
          <a-card class="card_sty" title="申请人信息" :headStyle="headStyle">
            <a-card-grid style="width:25%;textAlign:'center'">姓名</a-card-grid>
            <a-card-grid
              style="width:75%;textAlign:'center'"
            >{{agentInfoDTO.identityDTO.identityName}}</a-card-grid>
            <a-card-grid style="width:25%;textAlign:'center'">证件类型</a-card-grid>
            <a-card-grid style="width:75%;textAlign:'center'">身份证</a-card-grid>
            <a-card-grid style="width:25%;textAlign:'center'">证件号码</a-card-grid>
            <a-card-grid
              style="width:75%;textAlign:'center'"
            >{{agentInfoDTO.identityDTO.identityNo}}</a-card-grid>
            <a-card-grid style="width:25%;textAlign:'center'">证件有效期</a-card-grid>
            <a-card-grid
              style="width:75%;textAlign:'center'"
            >{{agentInfoDTO.identityDTO.expiryDate}}</a-card-grid>
            <!-- <a-card-grid style="width:25%;height:174px;textAlign:'center'">上传证件</a-card-grid>
          <a-card-grid style="width:75%;height:174px;textAlign:'center'">
            <div style="overflow: hidden;width:150px;height:150px;float: left;">
              <img style="width:150px;height:150px;" @click='imgClick'
                :src="'/file/file/download/' + identity.imgHead" alt>
            </div>
            <div style="overflow: hidden;width:150px;height:150px;float: left;margin-left:5px;">
              <img style="width:150px;height:150px;" @click='imgClick'
                :src="'/file/file/download/' + identity.imgEmblem" alt>
            </div>
            </a-card-grid>-->
          </a-card>

          <a-card class="card_sty" title="结算账户信息" :headStyle="headStyle">
            <a-card-grid style="width:25%;textAlign:'center'">账户名称</a-card-grid>
            <a-card-grid
              style="width:75%;textAlign:'center'"
            >{{agentInfoDTO.bankCardDTO.accountName}}</a-card-grid>
            <a-card-grid style="width:25%;textAlign:'center'">开户行名称</a-card-grid>
            <a-card-grid style="width:75%;textAlign:'center'">{{agentInfoDTO.bankCardDTO.bankName}}</a-card-grid>
            <a-card-grid style="width:25%;textAlign:'center'">开户行所在地</a-card-grid>
            <a-card-grid
              style="width:75%;textAlign:'center'"
            >{{agentInfoDTO.bankCardDTO.province}}-{{agentInfoDTO.bankCardDTO.city}}</a-card-grid>
            <a-card-grid style="width:25%;textAlign:'center'">支行名称</a-card-grid>
            <a-card-grid
              style="width:75%;textAlign:'center'"
            >{{agentInfoDTO.bankCardDTO.bankBranchName}}</a-card-grid>
            <a-card-grid style="width:25%;textAlign:'center'">账号</a-card-grid>
            <a-card-grid style="width:75%;textAlign:'center'">{{agentInfoDTO.bankCardDTO.cardNo}}</a-card-grid>
            <a-card-grid style="width:25%;textAlign:'center'">预留银行手机号</a-card-grid>
            <a-card-grid style="width:75%;textAlign:'center'">{{agentInfoDTO.bankCardDTO.mobileNo}}</a-card-grid>
            <a-card-grid style="width:25%;textAlign:'center'">持卡人身份证号</a-card-grid>
            <a-card-grid
              style="width:75%;textAlign:'center'"
            >{{agentInfoDTO.identityDTO.identityNo}}</a-card-grid>
          </a-card>

          <div style="text-align:center;margin:20px 0;">
            <a-button
              type="primary"
              @click="mainInfoModify"
              :disabled="isAbled"
              :loading="iconLoading"
            >{{btntext}}</a-button>
          </div>
          <div>
            <a-table
              size="middle"
              :scroll="{ y: '38vh' }"
              :columns="columns"
              :dataSource="updateRecord"
              :pagination="false"
              :rowKey="record => record.ctime"
            >
              <span slot="remark" slot-scope="record">
                <span>{{record.remark ? record.remark : '无'}}</span>
              </span>
            </a-table>
          </div>
        </a-spin>
      </div>
      <div v-if="!mainmodify">
        <p style="color:#3a3a3a;text-align:center;">我们将在1个工作日内完成审核，审核通过后变更生效</p>
        <p style="color:#909090;text-align:center;">注：支持图片格式JPG、PNG，且每个文件大小不超过{{imageSize}}M</p>
        <a-form @submit="handleSubmit" style="margin-top: 8px;" :form="form">
          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">申请人信息</a-col>
            <a-col :xs="{ span : 24 }" :sm="{ span:12 }">
              <p class="p-sty">适用于身份证有效期更新，若修改此项，请重新上传申请人身份证</p>
            </a-col>
          </a-row>

          <a-form-item v-bind="formItemLayout" label="姓名">
            <!-- <a-input
              v-decorator="[
                      'identityName',
                      {rules: [{ required: true, message: '请输入姓名' },{
                        
                       }],validateTrigger: 'blur'}
                    ]"
              placeholder="请输入姓名"
            />-->
            {{agentInfoDTO.identityDTO.identityName}}
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="证件类型">
            <div>
              <span>身份证</span>
            </div>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="证件号码">
            <a-input
              v-decorator="[
                      'identityNo',
                      {rules: [{ required: true, message: '请输入证件号码' },{
                        
                       }],validateTrigger: 'blur'}
                    ]"
              placeholder="请输入证件号码"
              @change="identityNoChange"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="证件有效期">
            <a-date-picker
              placeholder="请选择证件有效期"
              @change="dateChange"
              v-decorator="[
                      'expiryDate',
                      {rules: [{ required: true, message: '请选择证件有效期' }]}
                    ]"
            />
            <span
              @click="longexpiryDate"
              style="color:#1478d5;cursor: pointer;fontSize:13px;"
            >&nbsp; 长期</span>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="申请人身份证">
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                v-decorator="['upload5',{rules: [{ required: true, message: '请上传身份证正/反面!' }]}]"
                :data="{to}"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList5"
                @preview="handlePreview5"
                @change="handleChange5"
              >
                <div v-if="fileList5.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">身份证正面</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible5" :footer="null" @cancel="handleCancel5">
                <img alt="example" style="width: 100%" :src="previewImage5" />
              </a-modal>
              <span class="span-sty">人像面</span>
            </div>
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                :data="{to}"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList6"
                @preview="handlePreview6"
                @change="handleChange6"
              >
                <div v-if="fileList6.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">身份证反面</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible6" :footer="null" @cancel="handleCancel6">
                <img alt="example" style="width: 100%" :src="previewImage6" />
              </a-modal>
              <span class="span-sty">国徽面</span>
            </div>
          </a-form-item>

          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">结算账户信息</a-col>
            <a-col :xs="{ span : 24 }" :sm="{ span:12 }">
              <p class="p-sty">若修改此项，请重新上传结算银行账户</p>
            </a-col>
          </a-row>
          <a-form-item v-bind="formItemLayout" label="账户名称">
            <!-- <a-input
              v-decorator="[
                      'accountName',
                      {rules: [{ required: true, message: '请输入账户名称' },{
                        
                       }],validateTrigger: 'blur'}
                    ]"
              placeholder="请输入账户名称"
            />-->
            {{agentInfoDTO.identityDTO.identityName}}
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="开户行名称">
            <div>
              <a-select
                showSearch
                :notFoundContent="null"
                :defaultActiveFirstOption="false"
                :showArrow="false"
                :filterOption="false"
                @focus="handleFocus"
                @blur="handleBlur"
                @search="bankNameSearch"
                @change="bankNameChange"
                class="width-sty"
                v-decorator="[
                        'bankName',
                        {rules: [{ required: true, message: '请选择开户行名称' }]}
                      ]"
                placeholder="请输入银行名称进行选择"
              >
                <a-select-option v-for="d in seloptions" :key="d.value">{{d.label}}</a-select-option>
              </a-select>
            </div>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="开户行所在地" required>
            <a-cascader
              class="w-sty"
              v-model="bankaddress"
              :options="options3"
              @blur="addressBlur"
              @change="addressChange"
              placeholder="请选择开户行所在地"
            />
            <!-- v-decorator="['bankaddress ',{rules: [{ required: true, message: '请选择开户行所在地' }]}]" -->
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="支行名称">
            <div>
              <a-select
                showSearch
                @search="handleSearch"
                labelInValue
                @change="bankBranchNameChange"
                optionFilterProp="children"
                :filterOption="filterOption"
                style="width:100%;"
                v-decorator="[
                        'bankBranchName',
                        {rules: [{ required: true, message: '请输入支行名称' }]}
                      ]"
                placeholder="请选择支行名称"
              >
                <a-select-option v-for="d in bankBranchoptions" :key="d.value">{{d.label}}</a-select-option>
              </a-select>
            </div>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="账号">
            <a-input
              @blur="findCardBin"
              v-decorator="[
                      'cardNo',
                      {rules: [{ required: true, message: '请输入账号' }]}
                    ]"
              placeholder="请输入账号"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="预留手机号">
            <div>
              <a-input
                name="phone"
                placeholder="请输入银行预留手机号码"
                v-decorator="[
                              'mobileNo',
                              {
                               rules: [{ required: true, message: '请输入银行预留手机号码!' },{validator: validateCode}],validateTrigger: 'blur'
                              }
                              ]"
              />
            </div>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="持卡人身份证">
            <!-- <a-input
              v-decorator="[
                      'idCard',
                      {rules: [{ required: true, message: '请输入持卡人身份证' }]}
                    ]"
              placeholder="请输入持卡人身份证"
              disabled
            />-->
            {{agentInfoDTO.identityDTO.identityNo}}
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="结算银行账户">
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                v-decorator="['upload6',{rules: [{ required: true, message: '请上传银行卡正面!' }]}]"
                :data="{to}"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList7"
                @preview="handlePreview7"
                @change="handleChange7"
              >
                <div v-if="fileList7.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">银行卡正面</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible7" :footer="null" @cancel="handleCancel7">
                <img alt="example" style="width: 100%" :src="previewImage7" />
              </a-modal>
            </div>
            <p
                style="font-size: 12px;line-height: 30px;"
              >为了您的资金安全，请勿上传带有CVV安全码的照片</p>
          </a-form-item>

          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">合作机构资料</a-col>
          </a-row>

          <a-form-item v-bind="formItemLayout" label="申请人手持身份证和银行卡">
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                v-decorator="['upload7',{rules: [{ required: true, message: '请上传申请人手持身份证和银行卡照片!' }]}]"
                action="/file/file/upload"
                listType="picture-card"
                :data="{to}"
                name="upfile"
                :headers="henderstoken"
                :fileList="fileList9"
                @preview="handlePreview9"
                @change="handleChange9"
              >
                <div v-if="fileList9.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">手持照片</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible9" :footer="null" @cancel="handleCancel9">
                <img alt="example" style="width: 100%" :src="previewImage9" />
              </a-modal>
            </div>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="其他材料">
            <div class="clearfix">
              <a-upload
                v-decorator="['upload12']"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList12"
                :data="{to}"
                @preview="handlePreview12"
                @change="handleChange12"
              >
                <div v-if="fileList12.length < 3">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">其他材料</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible12" :footer="null" @cancel="handleCancel12">
                <img alt="example" style="width: 100%" :src="previewImage12" />
              </a-modal>
            </div>
          </a-form-item>

          <div style="text-align:center;margin:20px 0;">
            <a-button html-type="submit" type="primary" :loading="successLoading">保存</a-button>
            <a-button type="primary" @click="gologin">取消</a-button>
          </div>
        </a-form>
      </div>
      <a-modal class="modalClass" :visible="visible" @cancel="handleCancel" :footer="null">
        <img class="imgClass" :src="imageSrc" alt />
      </a-modal>
    </div>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";

import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
const ATabPane = ATabs.TabPane;
const DetailListItem = DetailList.Item;

import DetailList from "../../../components/tool/DetailList";

import pick from "lodash.pick";
import api from "@/common/api";
import { get, post } from "@/common/api";
import moment from "moment";
import { type } from "os";
import { mapState } from "vuex";
const dateFormat = "YYYY-MM-DD";
const columns = [
  {
    title: "变更内容",
    dataIndex: "modifyContent",
    width: "25%",
    align: "center",
  },
  { title: "申请时间", dataIndex: "ctime", width: "25%", align: "center" },
  { title: "审核状态", dataIndex: "statusName", width: "25%", align: "center" },
  {
    title: "审核信息",
    scopedSlots: { customRender: "remark" },
    width: "25%",
    align: "center",
  },
];
export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm,
    DetailListItem,
    DetailList,
  },
  data() {
    return {
      columns,
      btntext: "重要信息变更",
      userinfotext: "测试",
      imageSrc: "",
      query: {},
      customerOrg: {},
      legal: {},
      bank: {},
      agentInfoDTO: {},
      information: {},
      headStyle: {
        height: "45px",
        display: "flex",
      },
      henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:sessionStorage.getItem("memberNo") + "_" + sessionStorage.getItem("username"),
      iconLoading: false,
      successLoading: false,
      spinning: true,
      isAbled: true,
      mainmodify: true,
      endOpen: false,
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      //   重要信息修改
      isempty: true,
      isenter: true,
      previewImage5: "",
      previewImage6: "",
      previewImage7: "",
      previewImage8: "",
      previewImage9: "",
      previewImage12: "",
      options: [],
      options3: [],
      seloptions: [],
      previewVisible5: false,
      previewVisible6: false,
      previewVisible7: false,
      previewVisible8: false,
      previewVisible9: false,
      previewVisible12: false,
      fileList5: [],
      fileList6: [],
      fileList7: [],
      fileList8: [],
      fileList9: [],
      fileList12: [],
      bankBranchList: [],
      bankBranchoptions: [],
      bankaddress: [],
      updateRecord: {},
      login: false,
      bankCard: {
        bankName: "",
        bankBranchName: "",
        bankNo: "",
        accountName: "",
        cardNo: "",
        province: "",
        city: "",
        id: "",
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 },
        },
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 },
        },
      },
    };
  },
  watch: {},
  computed: {
    ...mapState({
      imageSize: (state) => state.imageSize,
    }),
  },
  mounted() {
    this.init();
  },
  methods: {
    moment,
    init: function () {
      this.$axios
        .get("/agent/account/manage/information/important")
        .then((res) => {
          if (res.data.code == "OK") {
            if (res.data.data.isInitStatus == false) {
              this.isAbled = false;
              this.btntext = "重要信息变更";
            } else {
              this.isAbled = true;
              this.btntext = "当前变更正在审核中";
            }

            this.agentInfoDTO = res.data.data.agentInfoDTO;
            this.updateRecord = res.data.data.updateRecord; //更新记录
            this.spinning = false;
          } else {
            this.$message.warning(res.data.message);
            this.spinning = false;
          }
        });
    },

    onChange(dates, dateStrings) {
      console.log("From: ", dates[0], ", to: ", dates[1]);
      console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
      this.query.time = [dateStrings[0], dateStrings[1]];
    },
    reset() {},
    conexport() {},
    callback() {},

    handleChange(value) {
      console.log(value);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.fileList5.length == 0) {
            this.$message.error("请上传身份证正面照片");
            return false;
          }
          if (this.fileList6.length == 0) {
            this.$message.error("请上传身份证反面照片");
            return false;
          }
          if (this.fileList7.length == 0) {
            this.$message.error("请上传银行卡正面");
            return false;
          }
          if (this.fileList9.length == 0) {
            this.$message.error("请上传手持银行卡身份证照片");
            return false;
          }

          //处理其他图片
          this.information.otherImgs = [];
          if (values.upload12) {
            let otherImgList = values.upload12.fileList || values.upload12;
            // console.log('otherImgList', otherImgList)
            otherImgList.forEach((item) => {
              if (item.response) {
                this.information.otherImgs.push(item.response.data);
              } else if (item.url) {
                let list = item.url.split("/");
                // console.log(list, list[list.length - 1])
                this.information.otherImgs.push(list[list.length - 1]);
              } else {
                this.information.otherImgs.push(item);
              }
            });
          }
          console.log(this.information.otherImgs);

          this.successLoading = true;

          let updata = {
              handCardImg: this.information.handCardImg,
              otherImgs: this.information.otherImgs,
              identityRequest: {
                idNo: this.information.idNo,
                identityName: this.agentInfoDTO.identityDTO.identityName,
                identityNo: values.identityNo,
                expiryDate: this.information.expiryDate,
                imgHead: this.information.imgHead,
                imgEmblem: this.information.imgEmblem,
              },
              bankCardRequest: {
                accountNo: this.information.accountNo,
                accountName: this.agentInfoDTO.identityDTO.identityName,
                bankName: values.bankName,
                province: this.bankCard.province,
                city: this.bankCard.city,
                bankBranchName: values.bankBranchName.label,
                bankNo: values.bankBranchName.key,
                cardNo: values.cardNo,
                mobileNo: values.mobileNo,
                imgCardno: this.information.imgCardno,
              },
            }
            // console.log("小微提交: ", updata);
          this.$axios
            .post("/agent/account/manage/small/important/update", updata)
            .then(
              (res) => {
                if (res.data.code == "OK") {
                  this.mainmodify = true;
                  this.successLoading = false;
                  this.init();

                  //this.$router.push("/org/accountmanage/myinfo");
                } else {
                  this.$message.warning(res.data.message);
                  this.successLoading = false;
                }
              },
              (err) => {
                this.successLoading = false;
              }
            );
        }
      });
    },
    handleOk() {
      this.$router.push("/home");
    },
    dateChange(date, dateString) {
      console.log("dateString", dateString);
      this.information.expiryDate = dateString;
    },
    longexpiryDate() {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          expiryDate: moment("9999-01-01"),
        });
      });
      this.information.expiryDate = "9999-01-01";
    },
    gologin() {
      // this.$router.push("/per/accountmanage/myinfo");
      location.reload();
      this.mainmodify = true;
    },

    // 重要信息变更
    mainInfoModify() {
      this.iconLoading = true;

      this.information.expiryDate = this.agentInfoDTO.identityDTO.expiryDate;
      this.information.idNo = this.agentInfoDTO.bankCardDTO.idNo;
      this.information.accountNo = this.agentInfoDTO.bankCardDTO.accountNo;
      this.bankaddress = [
        this.agentInfoDTO.bankCardDTO.province,
        this.agentInfoDTO.bankCardDTO.city,
      ];
      this.bankCard.province = this.agentInfoDTO.bankCardDTO.province;
      this.bankCard.city = this.agentInfoDTO.bankCardDTO.city;
      this.options3 = [
        {
          value: this.agentInfoDTO.bankCardDTO.province,
          label: this.agentInfoDTO.bankCardDTO.province,
          children: [
            {
              value: this.agentInfoDTO.bankCardDTO.city,
              label: this.agentInfoDTO.bankCardDTO.city,
            },
          ],
        },
      ];
      //图片
      this.information.imgHead = this.agentInfoDTO.identityDTO.imgHead;
      this.information.imgEmblem = this.agentInfoDTO.identityDTO.imgEmblem;

      this.information.handCardImg = this.agentInfoDTO.handCardImg;
      this.information.otherImgs = this.agentInfoDTO.otherImgs;

      this.information.imgCardno = this.agentInfoDTO.bankCardDTO.imgCardno;

      this.$nextTick(() => {
        this.form.setFieldsValue({
          // identityName: this.agentInfoDTO.identityDTO.identityName,
          identityNo: this.agentInfoDTO.identityDTO.identityNo,
          expiryDate: moment(this.agentInfoDTO.identityDTO.expiryDate),

          accountNo: this.agentInfoDTO.bankCardDTO.accountNo,
          // accountName: this.agentInfoDTO.bankCardDTO.accountName,
          bankName: this.agentInfoDTO.bankCardDTO.bankName,
          bankBranchName: {
            key: this.agentInfoDTO.bankCardDTO.bankNo,
            label: this.agentInfoDTO.bankCardDTO.bankBranchName,
          },
          cardNo: this.agentInfoDTO.bankCardDTO.cardNo,
          mobileNo: this.agentInfoDTO.bankCardDTO.mobileNo,
          // idCard: this.agentInfoDTO.identityDTO.identityNo,

          upload5: this.agentInfoDTO.identityDTO.imgHead,
          upload6: this.agentInfoDTO.bankCardDTO.imgCardno,
          upload7: this.agentInfoDTO.handCardImg,
          upload12: this.agentInfoDTO.otherImgs,
        });
        this.handleBlur()
        this.text2 = this.bankaddress
        this.addressBlur();
      });
      this.fileList5 = [
        //身份证正
        {
          uid: "5",
          name: "xxx.png",
          status: "done",
          url: "/file/file/download/" + this.information.imgHead,
        },
      ];
      this.fileList6 = [
        //身份证反
        {
          uid: "6",
          name: "xxx.png",
          status: "done",
          url: "/file/file/download/" + this.information.imgEmblem,
        },
      ];
      this.fileList7 = [
        //银行卡正
        {
          uid: "7",
          name: "xxx.png",
          status: "done",
          url: "/file/file/download/" + this.information.imgCardno,
        },
      ];
      
      this.fileList9 = [
        //手持银行卡身份证
        {
          uid: "9",
          name: "xxx.png",
          status: "done",
          url: "/file/file/download/" + this.information.handCardImg,
        },
      ];
      // this.fileList12 = [];
      //   if (this.information.otherImgs) {
      //     this.information.otherImgs.forEach(item => {
      //       let Item = {
      //         uid: Math.random(10000),
      //         name: "xxx.png",
      //         status: "done",
      //         url: "/file/file/download/" + item
      //       }
      //         this.fileList12.push(Item)
      //     })
      // }

      this.iconLoading = false;
      this.mainmodify = false;
    },
    validateCode(rule, value, callback) {
      if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        this.phone = false;
        callback("您输入的手机号格式有误！");
        return;
      } else {
        if (!value) {
          this.phone = false;
        } else {
          this.phone = true;
          this.phonevalue = value;
        }
        callback();
      }
    },
    handleChange5({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList5 = fileList;
      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        // 身份证正面
        this.information.imgHead = obj.response.data;
      }
    },
    handleChange6({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList6 = fileList;
      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        // 身份证反面
        this.information.imgEmblem = obj.response.data;
      }
    },
    handleChange7({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList7 = fileList;
      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        // 银行卡正面
        this.information.imgCardno = obj.response.data;
      }
    },
    handleChange8({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList8 = fileList;
      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        // 银行卡反面
        this.information.imgTrack = obj.response.data;
      }
    },
    handleChange9({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList9 = fileList;
      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        // 手持
        this.information.handCardImg = obj.response.data;
      }
    },
    handleChange12({ file, fileList }) {
      // let pos = file.name.lastIndexOf(".");
      // let lastName = file.name.substring(pos, file.name.length);
      // let supportTypes = [".jpeg", ".png", ".jpg", ".pdf"]; // jpeg、 png
      // if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
      //   this.$message.error("上传图片仅支持 jpeg、 png、pdf 3种格式！");
      //   return;
      // }
      if (file.size / (1024 * 1024) > 50) {
        this.$message.error(`上传图片大小应小于50Mb！`);
        return;
      }
      this.fileList12 = fileList;
      // let obj = fileList[0];
      // if (obj.response) {
      //   console.log(obj.response.data);
      //   // 其他
      //   this.information.otherImgs = obj.response.data;
      // }
    },

    handleCancel() {
      this.visible = false;
    },
    handleCancel5() {
      this.previewVisible5 = false;
    },
    handleCancel6() {
      this.previewVisible6 = false;
    },
    handleCancel7() {
      this.previewVisible7 = false;
    },
    handleCancel8() {
      this.previewVisible8 = false;
    },
    handleCancel9() {
      this.previewVisible9 = false;
    },
    handleCancel12() {
      this.previewVisible12 = false;
    },
    handlePreview5(file) {
      this.previewImage5 = file.url || file.thumbUrl;
      this.previewVisible5 = true;
    },
    handlePreview6(file) {
      this.previewImage6 = file.url || file.thumbUrl;
      this.previewVisible6 = true;
    },
    handlePreview7(file) {
      this.previewImage7 = file.url || file.thumbUrl;
      this.previewVisible7 = true;
    },
    handlePreview8(file) {
      this.previewImage8 = file.url || file.thumbUrl;
      this.previewVisible8 = true;
    },
    handlePreview9(file) {
      this.previewImage9 = file.url || file.thumbUrl;
      this.previewVisible9 = true;
    },
    handlePreview12(file) {
      this.previewImage12 = file.url || file.thumbUrl;
      this.previewVisible12 = true;
    },
    imgClick(e) {
      console.log(e);
      console.log(e.target.currentSrc);
      this.imageSrc = e.target.currentSrc;
      this.visible = true;
    },
    identityNoChange(e) {
      this.form.setFieldsValue({
        idCard: e.target.value,
      });
    },
    // 开户名称搜索
    bankNameSearch(value) {
      // console.log(value);
      let data = {
        bankSuper: value,
      };
      api.getBankName(data, (res) => {
        if (res.code == "OK") {
          this.seloptions = [];
          console.log("res.data", typeof res.list, res.list);
          res.list.forEach((r) => {
            this.seloptions.push({
              value: r.value,
              label: r.label,
            });
          });
          console.log(this.seloptions);
        } else {
          console.log("res", res);
        }
      });
      console.log(this.seloptions);
    },
    bankNameChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        bankName: value,
      });
      let data = {
        bankSuper: value,
      };
      api.getBankName(data, (res) => {
        console.log("res", res);
        if (res.code == "OK") {
          this.seloptions = [];
          console.log("res.data", typeof res.list, res.list);
          res.list.forEach((r) => {
            this.seloptions.push({
              value: r.value,
              label: r.label,
            });
          });
          console.log(this.seloptions);
        } else {
          console.log("res", res);
        }
      });
    },
    bankBranchNameChange(value) {
      console.log("value", value);
      this.bankCard.bankNo = value.key;
      this.bankCard.bankBranchName = value.label;
    },
    addressChange(value, selectedOptions) {
      console.log("addressChange", value);
      this.text2 = value;
      this.bankaddress = value;

      console.log("this.text2", this.text2);

      this.bankCard.province = this.text2[0];
      this.bankCard.city = this.text2[1];
    },
    handleFocus() {
      console.log("focus");
    },
    handleBlur() {
      let selvalue = this.form.getFieldValue("bankName");
      if (selvalue) {
        console.log("开户行:", selvalue);
        let data = {
          bankCode: selvalue,
        };
        api.getBankArea(
          data,
          (res) => {
            console.log("res", res);
            if (res.code == "OK") {
              this.options3 = res.list;
            } else {
              console.log(res);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      } else {
        // console.log("开户行为空", selvalue);
      }
    },
    // 开户地址失去焦点
    addressBlur() {
      let selvalue = this.form.getFieldValue("bankName");
      console.log("开户行地址：", this.text2);
      if (this.text2) {
        let data = {
          bankCode: selvalue,
          province: this.text2[0],
          city: this.text2[1],
          bankName: "",
        };
        api.getBankBranch(
          data,
          (res) => {
            console.log("res", res);
            if (res.code == "OK") {
              this.bankBranchoptions = res.list;
              this.bankBranchList = res.list;
            } else {
              console.log(res);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      } else {
        console.log("开户行地址为空");
      }
    },
    // 支行地址搜索
    handleSearch(value) {
      // console.log(value)
      if (escape(value).indexOf("%u") < 0) {
        let keywords = value;
        var newList = [];
        this.bankBranchoptions.forEach((item) => {
          if (item.label.indexOf(keywords) != -1) {
            newList.push(item);
          }
        });
        this.bankBranchoptions = newList;
      } else {
        this.bankBranchoptions = this.bankBranchList;
      }
    },
    //卡号
    findCardBin() {
      if (!this.mer) {
        return;
      }
      let selvalue = this.form.getFieldValue("cardNo");
      console.log(selvalue);
      let isnum = /^\d+$/.test(selvalue);
      if (!isnum) {
        console.log("cg");
        return false;
      }
      this.$axios.get("/agent/card/bin/search/" + selvalue).then(
        (res) => {
          console.log("res", res);
          if (res.data.code == "OK") {
            this.cardType = res.data.data.cardtype;
          } else if (res.data.code == "NEED_LOGIN") {
          } else {
            // this.$message.warning("卡号有误！");
          }
        },
        (err) => {
          console.log(res);
        }
      );
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

.ant-input {
  width: 50%;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: right;
  color: #333;
}

.ant-tabs-nav {
  float: right;
}

.content4 {
  display: flex;
  margin-bottom: 20px;

  .conleft {
    font-size: 16px;
    font-weight: 600;
    width: 180px;
  }

  .conright {
    padding: 0 20px;

    span {
      margin-right: 20px;
    }
  }
}

.row-sty {
  margin-bottom: 20px;
}

.width-sty {
  width: 50%;
}

.w-sty {
  width: 60%;
}

.span-sty {
  display: block;
  text-align: center;
  padding-right: 8px;
  color: #999;
}

.p-sty {
  color: #999;
  padding-left: 30px;
}

.formGroupTitle1 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
  width: 80%;
  color: #333;
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.imgClass {
  vertical-align: middle;
  border-style: none;
  width: 100%;
}
.card_sty {
  margin-bottom: 30px;
}

.maininfochange {
  overflow: scroll;
  height: 100%;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>